import React from 'react';
import ReactDOM from 'react-dom';
import store from './store'
// import { CHANGEAGE, CHANGECOLOR, CHANGENAME } from './store/types'
// console.log(store) // {getState,subscribe,dispatch}
import { changeAge, changeColor, changeName } from './store/actions'
/* 
getState 是用来获取state数据的
subscribe  是用来添加回调函数的，添加的这些回调函数会在state更新之后触发
dispatch 是用来触发reducer执行从而 更新state

*/
class App extends React.Component {
  componentDidMount() {
    this.clear = store.subscribe(() => {
      console.log("数据跟新过")
      this.setState({})
    })
    // subscribe 返回结果是一个回调函数， 这个回调执行 就会把当前
    // subscribe 添加的回调函数从事件池中移除掉
  }
  render() {
    let state = store.getState()
    console.log(state)
    return <div className='' style={{ color: state.colorInfo.color }}>
      <h1>{state.userInfo.name}==={state.userInfo.age}</h1>
      <button onClick={() => {
        store.dispatch(changeAge(100))
      }}>改age</button>
      <button onClick={() => {
        store.dispatch(changeName("中国"))
      }}>改name</button>

      <button onClick={() => {
        console.log(store.getState())
        store.dispatch(changeColor("blue"))
      }}>改颜色</button>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))